/**
 * Prototype Based Tooltip, version 0.1.0
 * Copyright (c) 2006, Nio Xiao <krazynio AT hotmail.com>
 * Licensed under The MIT License
 * Redistributions of files must retain the above copyright notice.
 * For details, see: http://nio.infor96.com/
 *
 * Requirements:
 * 	Prototype 1.5.0_rc1. You can download it from the Prototype web site: http://prototype.conio.net/
 *
 * Usage:
 * 	1. Insert the following lines into <head> section in your html file:
 * 		<script type="text/javascript" src="prototype.js"></script>
 * 		<script type="text/javascript" src="tooltip.js"></script>
 *  2. Define a cool css for tooltip, for example:
 *		<style type="text/css">
 *		#tooltip {
 *			background-color: #ffffcc;
 *			color: #000000; 
 *			padding: 4px; 
 *			border: 1px solid gray; 
 *			text-align: left; 
 *			cursor: default;
 *			opacity: 0.85;
 *			z-index: 10000;
 *		}
 *		</style>
 *	3. Create a new Tooltip instance for your tooltip source html element:
 *		<div id="mytip">Move mouse over here!</div>
 *		<script type="text/javascript">new Tooltip({element:"mytip", text:"Tooltip message.<br/>You can use HTML tags here."})</script>
 */

var Tooltip = Class.create();
Object.extend(Tooltip.prototype, {
	initialize: function(options) {
		Tooltip.Container.init();
		this.setOptions(options);
		Element.observe(this.element, 'mouseover', this.onMouseOver.bind(this));
		Element.observe(this.element, 'mouseout' , this.onMouseOut.bind(this));
	},
	
	setOptions: function(options) {
		var defaultOptions = {
			element: null,
			text: '',
			width: 200,
			left: 0
		};
		Object.extend(Object.extend(this, defaultOptions), options);
	},
	
	onMouseOver: function() {
		Tooltip.Container.show(this);
	},
	
	onMouseOut: function() {
		Tooltip.Container.hide(this);
	}
});

Tooltip.Container = {
	id: 'tooltip',
	
	className: '',
	
	init: function() {
		if (!$(this.id)) {
			var e = document.createElement('div');
			e.id = this.id;
			if (this.className)
				e.className = this.className;
			e.style.display  = 'none';
			e.style.position = 'absolute';
			document.body.appendChild(e);
		}
	},
	
	isShowing: function() {
		return Element.visible(this.id);
	},
	
	show: function(tip) {
		var bodyDim = Element.getDimensions(document.body);
		var pos = Position.cumulativeOffset($(tip.element));
		var x = pos[0], y = pos[1];
		var l = tip.left;
		if (!l) {
			l = (x + tip.width > bodyDim.width - 20) ? (x - tip.width) : x;
		}
		Element.setStyle(this.id, {'width': tip.width+'px', 'left': l+'px', "top": (y+20)+'px'});
		Element.update(this.id, tip.text);
		Element.show(this.id);
	},
	
	hide: function() {
		Element.update(this.id, '');
		Element.hide(this.id);
	}
}